<template>
  <div class="container">
    <el-dialog
      :title="form.id ? '编辑目录' : '新增目录'"
      :visible="isShow"
      width="30%"
      @close="closeDialog"
    >
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="所属学科">
          <el-select
            v-model="form.subjectID"
            placeholder="请选择活动区域"
            style="width: 90%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in list"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" style="width: 92%" prop="tagName">
          <el-input v-model="form.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="dialogOk">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 添加 目录详情 修改
import { add, detail, update } from '@/api/hmmm/tags.js'
// 学科列表
import { simple } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      form: {
        subjectID: '', // 学科ID
        tagName: ''// 标签名称
      },
      rules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      list: [] // 学科列表
    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  created () {
    this.getObjectsList()
  },
  methods: {
    // 获取目录详情
    async getDetail (data) {
      const res = await detail(data)
      // console.log(res)
      this.form = res.data
    },
    // 获取学科列表
    async getObjectsList () {
      const { data } = await simple()
      this.list = data
    },
    // 弹框
    // 关闭弹框
    closeDialog () {
      this.$emit('update:isShow', false)
      this.form = {
        subjectID: '', // 学科ID
        directoryName: ''// 目录名称
      }
      this.$refs.form.resetFields()
    },
    // 弹框确认
    dialogOk () {
      // 兜底验证
      this.$refs.form.validate(async isOk => {
        if (isOk) {
          if (this.form.id) {
            await update(this.form)
            // 关闭弹框
            this.closeDialog()
            // tip
            this.$message.success('编辑目录成功')
          } else {
            await add(this.form)
            // 关闭弹框
            this.closeDialog()
            // tip
            this.$message.success('新增目录成功')
          }

          // 调用父组件方法刷新数据
          this.$parent.getData()
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
</style>
